<template>
  <view class="scrool-page">
    <view class="item-box">
      <view class="left">
        <image class="img" :src="url+company.picUrl">
        </image>
      </view>
      <view class="center">
        <view class="name">{{company.name}}</view>

        <view class="tags">
          <block v-for="tag in company.tags.split(',')">
            <view class="tag">
              {{tag}}
            </view>
          </block>
        </view>
        <view class="address">{{company.address}}</view>
        <view class="browses">{{company.browses}}浏览</view>
      </view>
      <view class="right">
        <image class="img" src="../../../static/wind/phone.png" @click="call(company.contact)">
        </image>
      </view>
    </view>
    <u-line color="#E5E5E5"></u-line>
    <view class="company-title">公司介绍</view>
    <u-parse style="margin-left: 20rpx;margin-right: 20rpx;" :html="company.content" :domain="domain"></u-parse>

  </view>

  </view>
</template>
<script>
  export default {
    data() {
      return {
        company: {},
        url: "",
      };
    },
    filters: {
      //过滤器 用于格式化时间
      dateFormat: function(value) {

        var result = value.slice(0, 10);
        // 返回
        return result;
      },
    },
    onLoad(option) {
      this.url = this.baseUrl;
      this.domain = this.domain;
      var id = option.id;
      this.$u.api.getWindCompanyInfo({
        id: id,
      }).then(res => {
        this.company = res.data;
        console.log(res.data, "数据")
      });
      this.$u.api.browsesWindCompanys({
        id: id,
      }).then(res => {
        console.log(res.data, "数据")
      });
    },
    methods: {


      call(contact) {
        uni.makePhoneCall({
          phoneNumber: contact //仅为示例
        });

      },

    }
  }
</script>
<style lang="scss">
  page {
    width: 100%;
    height: 100%;
  }

  .company-title {
    margin-left: 20rpx;
    margin-top: 20rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;
  }

  .item-box {
    display: flex;
    flex-direction: row;
    background-color: #FFFFFF;
    margin-top: 20rpx;

    .left {
      flex-grow: 1;
      text-align: center;

      .img {
        width: 120rpx;
        height: 120rpx;
        background: #FFFFFF;
        border: 1px solid #E5E5E5;
        border-radius: 8rpx;
      }
    }

    .center {
      flex-grow: 4;

      .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .address {
        font-size: 26rpx;
        font-family: PingFang SC;
        color: #999999;
        line-height: 48rpx;
      }

      .browses {
        font-size: 24rpx;
        font-family: PingFang SC;
        color: #999999;
        line-height: 48rpx;
      }
    }

    .right {
      flex-grow: 1;

      .img {
        width: 44rpx;
        height: 44rpx;
        background: #FFFFFF;
      }
    }
  }

  .tags {
    display: flex;
    margin-top: 10rpx;

    .tag {
      background: #3BA2FF;
      //opacity: 0.5;
      padding: 5rpx;
      color: #FFFFFF;
      border-radius: 18rpx;
      margin: 1rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
    }

    .tag1 {
      font-size: 24rpx;
      font-family: PingFang SC;
      line-height: 40rpx;
    }
  }

  .item-address-browses {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;

    .address {
      font-size: 24rpx;
      font-family: PingFang SC;
      color: #808080;
      line-height: 40rpx;
    }
  }

  .item-name-date {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;

    .name {
      font-size: 34rpx;
      font-family: PingFang SC;
      color: #1A1A1A;
      line-height: 40rpx;
    }

    .date {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 40rpx;
    }
  }

  .touch {
    position: fixed;
    right: 20rpx;
    bottom: 50rpx;
    width: 130rpx;
    height: 130rpx;
    line-height: 130rpx;
    /* 文字垂直居中 */
    text-align: center;
    /* 水平居中 */
    background-color: #3BA2FF;
    border-radius: 50%;
    color: #fff;
    font-size: 30rpx;
  }

  .item-header-box {
    flex-shrink: 0; //保持内容不缩放，适用于内容不确定大小时候
    // height:100rpx; //设置高度为100，如果内容确定为这么高的话

    background-color: #3BA2FF;
    padding-top: 24rpx;
    padding-bottom: 24rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    align-items: center;
    justify-content: center;
    display: flex;
  }

  .item-list {
    flex-grow: 1; //充满屏幕
    height: 100vh; //如果中间不充满屏幕的话，自适应，底部会跟随在中间布局后面
    overflow: auto;
    background-color: #FFFFFF;
  }

  .item-item {
    display: flex;
    margin: 10rpx 15rpx;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    //height: 188rpx;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 10rpx;

    .item-author-browses {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
    }
  }

  .line-box {
    display: flex;
    margin-top: 10rpx;

    .left {

      font-size: 26rpx;
      font-family: PingFang SC;

      color: #999999;
      line-height: 40rpx;
    }

    .right {

      font-size: 24rpx;
      font-family: PingFang SC;
      margin-left: 10rpx;
      color: #333333;
      line-height: 40rpx;
    }

  }
</style>
